<!--
 * @Descripttion: 热门机型
 * @version: 
 * @Author:Hui
 * @Date: 2023-10-11 14:07:55
 * @LastEditTime: 2023-11-16 21:54:47
 * @LastEditors: sueRimn
-->

<template>
  <view class="hot-box" v-show="list && list.length">
    <view class="title">热门机型</view>

    <view class="list-wrap flex-wrap">
      <view class="item d-flex" v-for="item in list" :key="item.productId" @click="$emit('onClick', item)">
        <view class="image">
          <common-image :src="item.productImage ? item.productImage + '?x-oss-process=image/resize,m_fill,w_80' : ''"
            :styles="'width: 80rpx; height: 80rpx; display: block;'" />
        </view>
        <view class="info d-flex flex-column">
          <view class="name">{{ item.productName }}</view>
          <view class="price d-flex align-items-end">
            <text class="desc">最高可卖</text>
            <text class="yuan">￥</text>
            <text>{{ item.maxPrice }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    list: { type: Array, default: [] }
  }
}
</script>

<style lang="scss" scoped>
.hot-box {
  // padding: 0 20rpx;
}

.title {
  padding: 0 24rpx; 
  font-size: var(--hui-font-size-28);
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--hui-color-title);
}

.list-wrap {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  margin: 24rpx 24rpx 0rpx 24rpx;
  background-color: #fff;
  border-radius: 24rpx;
  

  .item {
    background: #FAFAFA;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    &:last-child {
      margin-bottom: 0;
    }

    .info {
      padding: 0 0 0 24rpx;

      .name {
        line-height: 36rpx;
        margin: 0rpx 0 0 0;
        font-size: var(--hui-font-size-28);
        white-space: nowrap;
        color: var(--hui-color-title);
        width: 300rpx;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }

      .price {
        font-size: var(--hui-font-size-28);
        color: #1F1F1F;
        line-height: 1;
        padding:12rpx 0 0 0;
        color: var(--hui-color-danger);
      }

      .yuan {
        font-size: var(--hui-font-size-24);
        color: var(--hui-color-danger);
      }

      .desc {
        font-size: var(--hui-font-size-24);
        color: var(--hui-color-subtitle);
      }
    }
  }
}
</style>